<template>
  <div class="ordermanage-page">
    <el-card class="search" shadow="never">
      <el-form :inline="true" :model="formData" class="form-inline">
        <el-form-item label="订单编号:">
          <el-input
            v-model="formData.orderNo"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="选择日期:">
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            align="right"
            unlink-panels
            value-format='yyyy-MM-dd'
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onQuery"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" class="result">
      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column property="orderNo" label="订单编号" width="200" show-overflow-tooltip>
        </el-table-column>
        <el-table-column property="skuName" label="商品名称" width="150">
        </el-table-column>
        <el-table-column
          property="amount"
          :formatter="formatterAmount"
          label="订单金额(元)"
          width="135"
        >
        </el-table-column>
        <el-table-column
          property="innerCode"
          label="设备编号"
          width="150"
        >
        </el-table-column>
        <el-table-column
          property="status"
          :formatter='formatterStatus'
          label="订单状态"
          width="150"
        >
        </el-table-column>
        <el-table-column
          property="createTime"
          :formatter="formatterCreateTime"
          label="订单日期"
          width="200"
        >
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="clickDetailFn(row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-if="page.totalCount > 10"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageIndex"
        :page-size="page.pageSize"
        layout="slot,prev, next"
      >
        <template>
          <span class="el-pagination__total"
            >共{{ page.totalCount }}条记录&nbsp;&nbsp;第&nbsp;{{
              page.pageIndex
            }}/{{ page.totalPage }}页</span
          >
        </template>
      </el-pagination>
    </el-card>
     <!-- 查看详情弹框 -->
    <el-dialog
      title="工单详情"
      :visible.sync="detailVisible"
      width="630px"
      class="detailDialog"
    >
      <template>
        <div class="task-status" v-if="statusType === 2">
          <img class="icon" src="@/assets/lkd/done1.png" alt="" />
          <span class="status">出货成功</span>
          <img class="pic" src="@/assets/lkd/done2.png" alt="" />
        </div>
        <div class="task-status" v-else-if="statusType === 3">
          <img class="icon" src="@/assets/lkd/undetermined1.png" alt="" />
          <span class="status">出货失败</span>
          <img class="pic" src="@/assets/lkd/undetermined2.png" alt="" />
        </div>
         <div class="task-status" v-else>
         <el-empty description="暂无数据"></el-empty>
        </div>
        <el-form label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单编号:">
                {{ detailRow.orderNo }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品名称:">
                {{ detailRow.skuName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品金额:">
                {{ (detailRow.amount/100).toFixed(2) }}
              </el-form-item>
            </el-col>
             <el-col :span="12">
              <el-form-item label="设备编号:">
                {{ detailRow.innerCode }}
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="创建时间:">
                {{ detailRow.createTime }}
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="完成时间:">
                {{ detailRow.updateTime }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付方式:">
                {{ detailRow.payType===1?'支付宝':'微信' }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备地址:">
                {{ detailRow.addr?.split('-')[detailRow.addr.split('-').length-1] }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { orderSearch } from '@/api/operation'
export default {
  data () {
    return {
      formData: {
        orderNo: '',
        startDate: '',
        endDate: ''

      },
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      },
      timeValue: [],
      tableData: [],
      loading: false,
      detailVisible: false,
      statusType: '',
      detailRow: {}
    }
  },
  created () {
    this.orderSearch()
  },
  methods: {
    async orderSearch () {
      try {
        this.loading = true
        if (this.timeValue && this.timeValue.length) {
          this.formData.startDate = this.timeValue[0]
          this.formData.endDate = this.timeValue[1]
        }
        const res = await orderSearch({ ...this.page, ...this.formData })
        // console.log(res)
        this.tableData = res.currentPageRecords
        this.page.totalCount = res.totalCount
        this.page.totalPage = res.totalPage
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    formatterCreateTime (row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY.MM.DD HH:mm:ss')
    },
    formatterAmount (row, column, cellValue, index) {
      return (cellValue / 100).toFixed(2)
    },
    formatterStatus (row, column, cellValue, index) {
      if (cellValue === 0) return '创建'
      if (cellValue === 1) return '支付完成'
      if (cellValue === 2) return '出货成功'
      if (cellValue === 3) return '出货失败'
      return ''
    },
    handleCurrentChange () {
      this.getTaskSearch()
    },
    onQuery () {
      this.orderSearch()
    },
    clickDetailFn (row) {
      this.detailVisible = true
      this.detailRow = row
      this.detailRow.createTime = dayjs(row.createTime).format('YYYY.MM.DD HH:mm:ss')
      this.detailRow.updateTime = dayjs(row.updateTime).format('YYYY.MM.DD HH:mm:ss')
      // 订单状态:0-创建;1-支付完成;2-出货成功;3-出货失败
      this.statusType = this.detailRow.status
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {}
}
</script>

<style scoped lang='scss'>
.ordermanage-page {
  .result {
    .operation {
      margin-bottom: 20px;
    }
  }
  .el-pagination {
    display: flex;
    height: 96px;
    align-items: center;
    .el-pagination__total {
      flex: 1;
      font-size: 16px !important;
      color: #dbdfe5 !important;
    }
    ::v-deep button:disabled {
      color: #d8dde3;
      background: #edf0f9;
    }
    ::v-deep button {
      width: 70px;
      height: 32px;
      margin: 0 16px;
      border-radius: 2px;
      background-color: #d5ddf8;
    }
  }

  .configForm {
    ::v-deep .el-input {
      width: 396px;
      .el-input__prefix,
      .el-input__suffix {
        width: 40px;
        height: 19px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8fafd;
        color: #606266;
        cursor: pointer;
        font-size: 13px;
        .el-button {
          padding: unset;
          width: 100%;
          height: 100%;
          background: unset;
          border: unset;
        }
      }
      .el-input__suffix {
        top: unset;
        bottom: 1px;
        right: 1px;
        border-right: none;
        border-left: 1px solid #d8dde3;
        border-radius: 0 0 4px 0;
        .el-input__suffix-inner {
          display: flex;
          align-items: center;
          width: 100%;
          height: 100%;
        }
      }
      .el-input__prefix {
        left: unset;
        top: 1px;
        right: 1px;
        border-radius: 0 4px 0 0;
        border-left: 1px solid #d8dde3;
        border-bottom: 1px solid #d8dde3;
      }
    }
  }
  .addForm {
    ::v-deep .el-form-item__content {
      width: 396px;
    }
  }
}
</style>
<style lang="scss">
.ordermanage-page {
  .el-card {
    border-radius: unset;
    border: unset;
  }
  .search.el-card {
    margin-bottom: 20px;
    height: 64px;
    display: flex;
    align-items: center;
    padding-left: 17px;
    background-color: #fff;
    .el-card__body {
      padding: unset;
      .el-form-item {
        margin: unset;
        margin-right: 10px;
      }
    }
  }
  .el-button {
    border: none !important;
    &.el-button--first {
      background-color: #fbf4f0 !important;
      color: #655b56 !important;

      &:hover {
        background-color: #f3e7e1 !important;
      }
    }
  }
}
</style>
